<!--  @Author: dengyinzhe-->
<!--  @Date: 2023/1/30 12:37-->
<!--  @FileName: AboutView-->
<!--  @LastEditors: 2023/1/30 12:37-->
<!--  @LastEditTime: 2023/1/30 12:37-->
<!--  @Description:-->
<template>
  <div class="addBrand-container" id="drug-add-app">
    <div class="container">
      <el-upload
        class="upload-demo"
        action="api/common/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeUpload"
        ref="upload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过20MB
        </div>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: "AboutView",
  data() {
    return {
      imageUrl: "",
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  methods: {
    handleAvatarSuccess(response) {
      this.imageUrl = `api/common/download?name=${response.data}`;
    },
    beforeUpload(file) {
      if (file) {
        const suffix = file.name.split(".")[1];
        const size = file.size / 1024 / 1024 < 20;
        if (["png", "jpeg", "jpg"].indexOf(suffix) < 0) {
          this.$message.error("上传图片只支持 png、jpeg、jpg 格式！");
          this.$refs.upload.clearFiles();
          return false;
        }
        if (!size) {
          this.$message.error("上传文件大小不能超过 20MB!");
          return false;
        }
        return file;
      }
    },
  },
};
</script>

<style scoped>
/* 添加 */
.addBrand-container .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.addBrand-container .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.addBrand-container .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}

.addBrand-container .avatar {
  width: 160px;
  height: 160px;
  display: block;
}

.addBrand-container .el-form--inline .el-form-item__content {
  width: 293px;
}

.addBrand-container .el-input {
  width: 293px;
}

.addBrand-container {
  margin: 30px;
}

.addBrand-container .container {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 30px;
  border-radius: 4px;
  min-height: 500px;
}

.addBrand-container .container .subBox {
  padding-top: 30px;
  text-align: center;
  border-top: solid 1px #f3f4f7;
}
</style>
